<template>
  <view class="recommend-page">
    <!-- 顶部导航栏 -->
<!--    <view class="header">
      <view class="header-content">
        <text class="title">服务推荐</text>
        <text class="subtitle">为您精选优质服务</text>
      </view>
    </view> -->

    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input type="text" placeholder="搜索服务" @focus="onSearchFocus" />
      </view>
    </view>

    <scroll-view scroll-y class="recommend-content">
      <!-- 服务推荐区 -->
      <view class="section-header">
        <text class="section-title">热门服务</text>
        <text class="view-more" @click="navigateToMore('service')">查看全部 ></text>
      </view>
      
      <view class="service-row">
        <view class="service-card" v-for="(service, index) in services.slice(0, 2)" :key="index" @click="navigateToServiceDetail(service.id)">
          <image :src="service.image" mode="aspectFill" class="service-image"></image>
          <view class="service-info">
            <text class="service-name">{{ service.name }}</text>
            <view class="service-footer">
              <text class="service-price">¥{{ service.price }}</text>
              <view class="service-rating">
                <text class="star">★</text>
                <text>{{ service.rating || '4.9' }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 促销活动区 -->
      <view class="section-header">
        <text class="section-title">促销活动</text>
        <text class="view-more" @click="navigateToMore('promotion')">查看全部 ></text>
      </view>
      
      <view class="promotion-list">
        <view class="promotion-card" v-for="(promotion, index) in promotions" :key="index" @click="navigateToPromotionDetail(promotion.id)">
          <image :src="promotion.image" mode="aspectFill" class="promotion-image"></image>
          <view class="promotion-overlay">
            <text class="promotion-title">{{ promotion.title }}</text>
            <text class="promotion-desc">{{ promotion.description }}</text>
            <view class="promotion-tag">
              <text>立即参与</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 邻里推荐区 -->
      <view class="section-header">
        <text class="section-title">邻里推荐</text>
        <text class="view-more" @click="navigateToMore('neighbor')">查看全部 ></text>
      </view>
      
      <view class="neighbor-list">
        <view class="neighbor-card" v-for="(neighbor, index) in neighbors" :key="index" @click="navigateToNeighborDetail(neighbor.id)">
          <image :src="neighbor.avatar" mode="aspectFill" class="neighbor-avatar"></image>
          <view class="neighbor-info">
            <view class="neighbor-header">
              <text class="neighbor-name">{{ neighbor.name }}</text>
              <view class="neighbor-rating">
                <text class="star">★</text>
                <text>{{ neighbor.rating || '4.8' }}</text>
              </view>
            </view>
            <text class="neighbor-recommend">{{ neighbor.recommend }}</text>
            <view class="neighbor-tags">
              <view class="tag" v-for="(tag, idx) in neighbor.tags || ['专业', '贴心']" :key="idx">
                <text>{{ tag }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部间距 -->
      <view class="bottom-space"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      services: [
        {
          id: 1,
          name: '专业保洁',
          price: '99.00',
          rating: '4.9',
          image: '/static/清洁卫生.jpg'
        },
        {
          id: 2,
          name: '家电维修',
          price: '199.00',
          rating: '4.8',
          image: '/static/首页轮播图3.jpg'
        },
        {
          id: 3,
          name: '老人照护',
          price: '299.00',
          rating: '4.9',
          image: '/static/照顾老人.jpg'
        },
        {
          id: 4,
          name: '日常做饭',
          price: '150.00',
          rating: '4.7',
          image: '/static/首页轮播图1.jpg'
        }
      ],
      promotions: [
        {
          id: 1,
          title: '新用户特惠',
          description: '首次下单立减50元',
          image: '/static/首页轮播图2.png'
        },
        {
          id: 2,
          title: '会员专享',
          description: '会员服务8折优惠',
          image: '/static/首页轮播图.jpg'
        }
      ],
      neighbors: [
        {
          id: 1,
          name: '张阿姨',
          recommend: '推荐专业保洁服务，服务态度好',
          avatar: '/static/许阿姨.jpg',
          rating: '4.9',
          tags: ['专业', '贴心']
        },
        {
          id: 2,
          name: '李师傅',
          recommend: '推荐家电维修，技术专业',
          avatar: '/static/杨先生.jpg',
          rating: '4.8',
          tags: ['技术好', '准时']
        },
        {
          id: 3,
          name: '王阿姨',
          recommend: '老人照护服务很专业，很有耐心',
          avatar: '/static/郑阿姨.png',
          rating: '4.9',
          tags: ['耐心', '细心']
        }
      ]
    }
  },
  methods: {
    navigateToServiceDetail(serviceId) {
      uni.navigateTo({
        url: `/pages/service-detail/service-detail?id=${serviceId}`
      })
    },
    navigateToPromotionDetail(promotionId) {
      uni.navigateTo({
        url: `/pages/promotion/promotion?id=${promotionId}`
      })
    },
    navigateToNeighborDetail(neighborId) {
      uni.navigateTo({
        url: `/pages/neighbor/neighbor?id=${neighborId}`
      })
    },
    navigateToMore(type) {
      const urls = {
        service: '/pages/service/service',
        promotion: '/pages/promotion/promotion',
        neighbor: '/pages/neighbor/neighbor'
      }
      uni.navigateTo({
        url: urls[type]
      })
    },
    onSearchFocus() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    }
  }
}
</script>

<style>
.recommend-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.header {
  background-color: #71aee8;
  padding: 20px;
  text-align: center;
  position: relative;
}

.header-content {
  text-align: center;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

.subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 5px;
}

/* 搜索容器 */
.search-container {
	
  background-color: #71aee8;
  padding: 15px 15px 18px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 搜索框 */
.search-box {
  background-color: #fff;
  border-radius: 20px;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.search-icon {
  margin-right: 0px;
  color: #71aee8;
  font-size: 16px;
}

.search-box input {
  flex: 1;
  font-size: 14px;
  color: #333;
  height: 20px;
  line-height: 20px;
}

.search-box input::placeholder {
  color: #999;
}

/* 内容区域 */
.recommend-content {
  flex: 1;
  padding: 15px;
}

/* 区块标题 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  position: relative;
  padding-left: 10px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  height: 18px;
  width: 4px;
  background-color: #71aee8;
  border-radius: 2px;
}

.view-more {
  font-size: 14px;
  color: #71aee8;
}

/* 服务行布局 */
.service-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px 0;
}

.service-card {
  width: calc(50% - 10px);
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.service-card:active {
  transform: scale(0.98);
}

.service-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.service-info {
  padding: 8px;
}

.service-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-price {
  font-size: 14px;
  color: #ff6b6b;
  font-weight: bold;
}

.service-rating {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.star {
  color: #f1c40f;
  margin-right: 2px;
  font-size: 12px;
}

/* 促销活动卡片 */
.promotion-list {
  margin: 10px 0;
}

.promotion-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
  height: 160px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.promotion-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promotion-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff;
}

.promotion-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.promotion-desc {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 10px;
}

.promotion-tag {
  display: inline-block;
  background-color: #ff6b6b;
  border-radius: 15px;
  padding: 4px 12px;
}

.promotion-tag text {
  font-size: 12px;
  color: #fff;
}

/* 邻里推荐卡片 */
.neighbor-list {
  margin: 10px 0;
}

.neighbor-card {
  display: flex;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.neighbor-avatar {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin-right: 15px;
}

.neighbor-info {
  flex: 1;
}

.neighbor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.neighbor-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.neighbor-rating {
  display: flex;
  align-items: center;
}

.neighbor-recommend {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.4;
}

.neighbor-tags {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  background-color: #f0f9ff;
  border-radius: 10px;
  padding: 2px 8px;
  margin-right: 8px;
}

.tag text {
  font-size: 12px;
  color: #71aee8;
}

/* 底部间距 */
.bottom-space {
  height: 30px;
}
</style>

